<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>src&#x2F;pixi&#x2F;renderers&#x2F;CanvasRenderer.js - Pixi.JS</title>
    <link rel="stylesheet" href="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;3.8.0&#x2F;build&#x2F;cssgrids&#x2F;cssgrids-min.css">
    <link rel="stylesheet" href="..&#x2F;assets/vendor/prettify/prettify-min.css">
    <link rel="stylesheet" href="..&#x2F;assets/css/main.css" id="site_styles">
    <link rel="shortcut icon" type="image/png" href="..&#x2F;assets/favicon.png">
    <script src="http:&#x2F;&#x2F;yui.yahooapis.com&#x2F;combo?3.8.0&#x2F;build&#x2F;yui&#x2F;yui-min.js"></script>
</head>
<body class="yui3-skin-sam">

<div id="doc">
    <div id="hd" class="yui3-g header">
        <div class="yui3-u-3-4">
            
                <h1><img src="http:&#x2F;&#x2F;www.goodboydigital.com&#x2F;pixijs&#x2F;logo_small.png" title="Pixi.JS"></h1>
            
        </div>
        <div class="yui3-u-1-4 version">
            <em>API Docs for: 1.0.0</em>
        </div>
    </div>
    <div id="bd" class="yui3-g">

        <div class="yui3-u-1-4">
            <div id="docs-sidebar" class="sidebar apidocs">
                <div id="api-list">
    <h2 class="off-left">APIs</h2>
    <div id="api-tabview" class="tabview">
        <ul class="tabs">
            <li><a href="#api-classes">Classes</a></li>
            <li><a href="#api-modules">Modules</a></li>
        </ul>

        <div id="api-tabview-filter">
            <input type="search" id="api-filter" placeholder="Type to filter APIs">
        </div>

        <div id="api-tabview-panel">
            <ul id="api-classes" class="apis classes">
            
                <li><a href="..&#x2F;classes/AssetLoader.html">AssetLoader</a></li>
            
                <li><a href="..&#x2F;classes/BaseTexture.html">BaseTexture</a></li>
            
                <li><a href="..&#x2F;classes/CanvasRenderer.html">CanvasRenderer</a></li>
            
                <li><a href="..&#x2F;classes/DisplayObject.html">DisplayObject</a></li>
            
                <li><a href="..&#x2F;classes/DisplayObjectContainer.html">DisplayObjectContainer</a></li>
            
                <li><a href="..&#x2F;classes/InteractionData.html">InteractionData</a></li>
            
                <li><a href="..&#x2F;classes/InteractionManager.html">InteractionManager</a></li>
            
                <li><a href="..&#x2F;classes/MovieClip.html">MovieClip</a></li>
            
                <li><a href="..&#x2F;classes/Point.html">Point</a></li>
            
                <li><a href="..&#x2F;classes/Rectangle.html">Rectangle</a></li>
            
                <li><a href="..&#x2F;classes/Sprite.html">Sprite</a></li>
            
                <li><a href="..&#x2F;classes/SpriteSheetLoader.html">SpriteSheetLoader</a></li>
            
                <li><a href="..&#x2F;classes/Stage.html">Stage</a></li>
            
                <li><a href="..&#x2F;classes/Text.html">Text</a></li>
            
                <li><a href="..&#x2F;classes/Texture.html">Texture</a></li>
            
                <li><a href="..&#x2F;classes/TilingSprite.html">TilingSprite</a></li>
            
                <li><a href="..&#x2F;classes/WebGLBatch.html">WebGLBatch</a></li>
            
                <li><a href="..&#x2F;classes/WebGLRenderer.html">WebGLRenderer</a></li>
            
            </ul>

            <ul id="api-modules" class="apis modules">
            
                <li><a href="..&#x2F;modules/PIXI.html">PIXI</a></li>
            
            </ul>
        </div>
    </div>
</div>

            </div>
        </div>
        <div class="yui3-u-3-4">
                <div id="api-options">
        Show:
        <label for="api-show-inherited">
            <input type="checkbox" id="api-show-inherited" checked>
            Inherited
        </label>

        <label for="api-show-protected">
            <input type="checkbox" id="api-show-protected">
            Protected
        </label>

        <label for="api-show-private">
            <input type="checkbox" id="api-show-private">
            Private
        </label>
        <label for="api-show-deprecated">
            <input type="checkbox" id="api-show-deprecated">
            Deprecated
        </label>

    </div>


            <div class="apidocs">
                <div id="docs-main">
                    <div class="content">
                        <h1 class="file-heading">File: src&#x2F;pixi&#x2F;renderers&#x2F;CanvasRenderer.js</h1>

<div class="file">
    <pre class="code prettyprint linenums">
&#x2F;**
 * @author Mat Groves http:&#x2F;&#x2F;matgroves.com&#x2F; @Doormat23
 *&#x2F;


&#x2F;**
 * the CanvasRenderer draws the stage and all its content onto a 2d canvas. This renderer should be used for browsers that do not support webGL.
 * Dont forget to add the view to your DOM or you will not see anything :)
 * @class CanvasRenderer
 * @constructor
 * @param width {Number} the width of the canvas view
 * @default 0
 * @param height {Number} the height of the canvas view
 * @default 0
 * @param view {Canvas} the canvas to use as a view, optional
 * @param transparent {Boolean} the transparency of the render view, default false
 * @default false
 * 
 *&#x2F;
PIXI.CanvasRenderer = function(width, height, view, transparent)
{
	this.transparent = transparent;
	
	&#x2F;**
	 * The width of the canvas view
	 * @property width
	 * @type Number
	 * @default 800
	 *&#x2F;
	this.width = width || 800;
	&#x2F;**
	 * The height of the canvas view
	 * @property height
	 * @type Number
	 * @default 600
	 *&#x2F;
	this.height = height || 600;
	
	this.refresh = true;
	
	&#x2F;**
	 * The canvas element that the everything is drawn to
	 * @property view
	 * @type Canvas
	 *&#x2F;
	this.view = view || document.createElement( &#x27;canvas&#x27; ); 
	
	&#x2F;&#x2F; hack to enable some hardware acceleration!
	&#x2F;&#x2F;this.view.style[&quot;transform&quot;] = &quot;translatez(0)&quot;;
	
    this.view.width = this.width;
	this.view.height = this.height;  
	this.count = 0;
	
	&#x2F;**
	 * The canvas context that the everything is drawn to
	 * @property context
	 * @type Canvas 2d Context
	 *&#x2F;
	this.context = this.view.getContext(&quot;2d&quot;);
}

&#x2F;&#x2F; constructor
PIXI.CanvasRenderer.constructor = PIXI.CanvasRenderer;

&#x2F;**
 * Renders the stage to its canvas view
 * @method render
 * @param stage {Stage} the Stage element to be rendered
 *&#x2F;
PIXI.CanvasRenderer.prototype.render = function(stage)
{
	&#x2F;&#x2F; update children if need be
	
	stage.__childrenAdded = [];
	stage.__childrenRemoved = [];
	
	&#x2F;&#x2F; update textures if need be
	PIXI.texturesToUpdate = [];
	PIXI.texturesToDestroy = [];
	
	this.context.setTransform(1,0,0,1,0,0); 
	stage.updateTransform();
	  
	this.context.setTransform(1,0,0,1,0,0); 
	
	&#x2F;&#x2F; update the background color
	if(this.view.style.backgroundColor!=stage.backgroundColorString &amp;&amp; !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString;

	this.context.clearRect(0, 0, this.width, this.height)
    this.renderDisplayObject(stage);
    &#x2F;&#x2F;as
   
    &#x2F;&#x2F; run interaction!
	if(stage.interactive)
	{
		&#x2F;&#x2F;need to add some events!
		if(!stage._interactiveEventsAdded)
		{
			stage._interactiveEventsAdded = true;
			stage.interactionManager.setTarget(this);
		}
	}
	
	&#x2F;&#x2F; remove frame updates..
	if(PIXI.Texture.frameUpdates.length &gt; 0)
	{
		PIXI.Texture.frameUpdates = [];
	}
}

&#x2F;**
 * resizes the canvas view to the specified width and height
 * @param the new width of the canvas view
 * @param the new height of the canvas view
 *&#x2F;
PIXI.CanvasRenderer.prototype.resize = function(width, height)
{
	this.width = width;
	this.height = height;
	
	this.view.width = width;
	this.view.height = height;
}

&#x2F;**
 * @private
 *&#x2F;
PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
{
	var transform = displayObject.worldTransform;
	var context = this.context;
	context.globalCompositeOperation = &quot;source-over&quot;
	var blit = false;
	
	if(!displayObject.visible)return;
		
	if(displayObject instanceof PIXI.Sprite)
	{
		var frame = displayObject.texture.frame;
		
		if(frame)
		{
			context.globalAlpha = displayObject.worldAlpha;
			
			&#x2F;&#x2F; BLITZ!!!
			&#x2F;*
			 * if the rotation is 0 then we can blitz it
			 * meaning we dont need to do a transform and also we
			 * can round to the nearest round number for a little extra speed!
			 *&#x2F;
			&#x2F;*if(displayObject.rotation == 0)
			{
				if(!blit)this.context.setTransform(1,0,0,1,0,0); 
				blit = true;
				context.drawImage(displayObject.texture.baseTexture.image, 
								   frame.x,
								   frame.y,
								   frame.width,
								   frame.height,
								   (transform[2]+ ((displayObject.anchor.x - displayObject.texture.trim.x) * -frame.width) * transform[0]),
								   (transform[5]+ ((displayObject.anchor.y - displayObject.texture.trim.y) * -frame.height)* transform[4]),
								   (displayObject.width * transform[0]),
								   (displayObject.height * transform[4]));
				
			}	
			else
			{*&#x2F;
				blit = false;
				context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
				context.drawImage(displayObject.texture.baseTexture.source, 
								   frame.x,
								   frame.y,
								   frame.width,
								   frame.height,
								   (displayObject.anchor.x - displayObject.texture.trim.x) * -frame.width, 
								   (displayObject.anchor.y - displayObject.texture.trim.y) * -frame.height,
								   frame.width,
								   frame.height);
			&#x2F;&#x2F;}
		}					   
   	}
   	else if(displayObject instanceof PIXI.Strip)
	{
		context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
		this.renderStrip(displayObject);
	}
	else if(displayObject instanceof PIXI.TilingSprite)
	{
		context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
		this.renderTilingSprite(displayObject);
	}
	
	&#x2F;&#x2F; render!
	for (var i=0; i &lt; displayObject.children.length; i++) 
	{
		this.renderDisplayObject(displayObject.children[i]);
	}
	
	
}

&#x2F;**
 * @private
 *&#x2F;
PIXI.CanvasRenderer.prototype.renderStripFlat = function(strip)
{
	var context = this.context;
	var verticies = strip.verticies;
	var uvs = strip.uvs;
	
	var length = verticies.length&#x2F;2;
	this.count++;
	
	context.beginPath();
	for (var i=1; i &lt; length-2; i++) 
	{
		
		&#x2F;&#x2F; draw some triangles!
		var index = i*2;
		
		 var x0 = verticies[index],   x1 = verticies[index+2], x2 = verticies[index+4];
 		 var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
 		 
		context.moveTo(x0, y0);
		context.lineTo(x1, y1);
		context.lineTo(x2, y2);
		
	};	
	
&#x2F;&#x2F;	context.globalCompositeOperation = &#x27;lighter&#x27;;
	context.fillStyle = &quot;#FF0000&quot;;
	context.fill();
	context.closePath();
	&#x2F;&#x2F;context.globalCompositeOperation = &#x27;source-over&#x27;;	
}

&#x2F;**
 * @private
 *&#x2F;
PIXI.CanvasRenderer.prototype.renderTilingSprite = function(sprite)
{
	var context = this.context;
	
 	if(!sprite.__tilePattern) sprite.__tilePattern = context.createPattern(sprite.texture.baseTexture.source, &quot;repeat&quot;);
 	
	context.beginPath();
	
	var tilePosition = sprite.tilePosition;
	var tileScale = sprite.tileScale;
	
    &#x2F;&#x2F; offset
    context.scale(tileScale.x,tileScale.y);
    context.translate(tilePosition.x, tilePosition.y);
 	
	context.fillStyle = sprite.__tilePattern;
	context.fillRect(-tilePosition.x,-tilePosition.y,sprite.width &#x2F; tileScale.x, sprite.height &#x2F; tileScale.y);
	
	context.scale(1&#x2F;tileScale.x, 1&#x2F;tileScale.y);
    context.translate(-tilePosition.x, -tilePosition.y);
    
    context.closePath();
}



&#x2F;**
 * @private
 *&#x2F;
PIXI.CanvasRenderer.prototype.renderStrip = function(strip)
{
	var context = this.context;
	&#x2F;&#x2F;context.globalCompositeOperation = &#x27;lighter&#x27;;
	&#x2F;&#x2F; draw triangles!!
	var verticies = strip.verticies;
	var uvs = strip.uvs;
	
	var length = verticies.length&#x2F;2;
	this.count++;
	for (var i=1; i &lt; length-2; i++) 
	{
		
		&#x2F;&#x2F; draw some triangles!
		var index = i*2;
		
		 var x0 = verticies[index],   x1 = verticies[index+2], x2 = verticies[index+4];
 		 var y0 = verticies[index+1], y1 = verticies[index+3], y2 = verticies[index+5];
 		 
  		 var u0 = uvs[index] * strip.texture.width,   u1 = uvs[index+2] * strip.texture.width, u2 = uvs[index+4]* strip.texture.width;
   		 var v0 = uvs[index+1]* strip.texture.height, v1 = uvs[index+3] * strip.texture.height, v2 = uvs[index+5]* strip.texture.height;


		context.save();
		context.beginPath();
		context.moveTo(x0, y0);
		context.lineTo(x1, y1);
		context.lineTo(x2, y2);
		context.closePath();
		
	&#x2F;&#x2F;	context.fillStyle = &quot;white&quot;&#x2F;&#x2F;rgb(1, 1, 1,1));
	&#x2F;&#x2F;	context.fill();
		context.clip();
		
		
        &#x2F;&#x2F; Compute matrix transform
        var delta = u0*v1 + v0*u2 + u1*v2 - v1*u2 - v0*u1 - u0*v2;
        var delta_a = x0*v1 + v0*x2 + x1*v2 - v1*x2 - v0*x1 - x0*v2;
        var delta_b = u0*x1 + x0*u2 + u1*x2 - x1*u2 - x0*u1 - u0*x2;
        var delta_c = u0*v1*x2 + v0*x1*u2 + x0*u1*v2 - x0*v1*u2 - v0*u1*x2 - u0*x1*v2;
        var delta_d = y0*v1 + v0*y2 + y1*v2 - v1*y2 - v0*y1 - y0*v2;
        var delta_e = u0*y1 + y0*u2 + u1*y2 - y1*u2 - y0*u1 - u0*y2;
        var delta_f = u0*v1*y2 + v0*y1*u2 + y0*u1*v2 - y0*v1*u2 - v0*u1*y2 - u0*y1*v2;
		
		
		
		    
        context.transform(delta_a&#x2F;delta, delta_d&#x2F;delta,
                      delta_b&#x2F;delta, delta_e&#x2F;delta,
                      delta_c&#x2F;delta, delta_f&#x2F;delta);
                 
		context.drawImage(strip.texture.baseTexture.source, 0, 0);
	  	context.restore();
	};
	
&#x2F;&#x2F;	context.globalCompositeOperation = &#x27;source-over&#x27;;	
}









    </pre>
</div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script src="..&#x2F;assets/vendor/prettify/prettify-min.js"></script>
<script>prettyPrint();</script>
<script src="..&#x2F;assets/js/yui-prettify.js"></script>
<script src="..&#x2F;assets/../api.js"></script>
<script src="..&#x2F;assets/js/api-filter.js"></script>
<script src="..&#x2F;assets/js/api-list.js"></script>
<script src="..&#x2F;assets/js/api-search.js"></script>
<script src="..&#x2F;assets/js/apidocs.js"></script>
</body>
</html>
